<template>
  <!-- loading -->
  <el-button type="primary" @click="showLoading">loading显示和隐藏</el-button>
  <!-- 表格 -->
  <BasicTable
    :table-data="paginatedData"
    :loading="loading"
    :total="tableData.length"
    :current-page="currentPage"
    :page-size="pageSize"
    @handle-size-change="handlePageSizeChange"
    @handle-current-page-change="handleCurrentPageChange"
  >
    <template v-for="(column, index) in columnArr" :key="index">
      <el-table-column :prop="column.prop" :label="column.label" />
    </template>
  </BasicTable>
</template>

<script setup>
import BasicTable from "./table.vue";
import { ref, computed } from "vue";
const tableData = [
  {
    date: "1",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "3",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "4",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
const columnArr = [
  {
    prop: "date",
    label: "日期",
  },
  {
    prop: "name",
    label: "姓名",
  },
  {
    prop: "address",
    label: "地址",
  },
];
const loading = ref(false);
const currentPage = ref(1);
const pageSize = ref(2);
const showLoading = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 2000);
};

const paginatedData = computed(() => {
  const startIndex = (currentPage.value - 1) * pageSize.value;
  const endIndex = startIndex + pageSize.value;
  return tableData.slice(startIndex, endIndex);
});
const handlePageSizeChange = (val) => {
  pageSize.value = val;
};

const handleCurrentPageChange = (val) => {
  currentPage.value = val;
};
</script>

<style lang="scss" scoped></style>
